<template>
  <div class="hello">
    <span>子组件一</span>
    <button @click="add5RMB">5元红包</button>

    <!-- $store.state.count 或者mapstate引入 -->
    <span>红包总金额：{{ count }}元</span>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {};
  },
  computed: {
    // 语法糖：将this.count 映射为 $store.state.count
    ...mapState(["count"]), // 返回的是个对象
  },
  watch: {
    count(newV) {
      if (newV) {
        window.eventBus.$emit("aaF", this.count);
        window.eventBus.aa = this.aa;
      }
    },
  },
  components: {},
  mounted() {
    console.log("aa=", window.eventBus.aa);
  },
  methods: {
    // 语法糖：将 `this.add5RMB()` 映射为 `this.$store.commit('add5RMB')`
    ...mapMutations(["add5RMB"]),
    // add5RMB() {
    //   this.$store.commit("add5RMB");
    // },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>
